<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景区领导决策-历史客流</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/page.css">
</head>
<body>
    <div class="box">
        <div class="header head-font">历史客流</div>
        <div class="tab-box">
          <span class="active">日</span>
          <span>月</span>
          <span>年</span>
        </div>
        <ul class="content-box">
          <li>
            <h3 class="title tit-font">历史同期客流同比</h3>
            <div class="my-chart" id="myChart2"></div>
          </li>
          <li>
            <h3 class="title tit-font">历史同期营收同比</h3>
            <div class="my-chart" id="myChart3"></div>
          </li>
        </ul>
      </div>
    <script src="../plugin/ECharts/echarts.js"></script>
    <script src="../plugin/jquery-1.11.1.min.js"></script>
    <script>
         var data1 = [457, 374, 398, 264, 398]
         var data2 = [384, 374, 305, 356, 368]
        $('.tab-box>span').click(function(){
            $(this).addClass('active').siblings().removeClass('active')
            let index=$(this).index()
            if(index==0){
                data1 = [457, 374, 398, 264, 398]
                data2 = [384, 374, 305, 356, 368]
                drawLine2()
                drawLine3()
            }
            if(index==1){
                data1 = [427, 364, 308, 224, 318]
                data2 = [364, 324, 305, 316, 328]
                drawLine2()
                drawLine3()
            }
            if(index==2){
                data1 = [467, 364, 338, 264, 368]
                data2 = [344, 314, 295, 306, 318]
                drawLine2()
                drawLine3()
            }
        })
       function drawLine2 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      var option = {
        grid: {
          top: '0',
          left: '4%',
          right: '4%',
          bottom: '8%'
        },
        title: {
          show: false,
          text: '历史同期客流同比',
          x: '20',
          y: '10',
          textStyle: {
            fontSize: 14,
            color: '#fff'
          }
        },
        legend: {
          show: false,
          top: 10,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 20, // 设置宽度
          itemHeight: 15 // 设置高度
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['总数', '散客', '团体', '线下', '线上'],
          axisTick: { // --坐标轴 刻度
            show: true // ---是否显示
          },
          axisLine: { // ---坐标轴 轴线
            show: true, // ---是否显示
            lineStyle: {
              color: 'rgba(202,202,204,0.5)',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: { // X轴文字
            show: true,
            interval: 0,
            textStyle: {
              fontSize: 12,
              color: '#999'
            }
          }
        },
        yAxis: {
          show: false,
          type: 'value',
          splitLine: { // 分割线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: { // 轴刻度值
            formatter: '{value}',
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          axisLine: { // ---坐标轴 轴线
            show: false // ---是否显示
          }
        },
        series: [{
          name: '今日',
          type: 'bar',
          barWidth: '15px',
          data: data1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(128,128,128,0.6)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(247,247,247,0.6)' // 100% 处的颜色
              }], false)
            }
          }
        }, {
          name: '同日',
          type: 'bar',
          barWidth: '15px',
          data: data2,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(51,172,143,0.6)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(51,172,143,0)' // 100% 处的颜色
              }], false)
            }
          }
        }]
      }
      myChart.setOption(option)
      setTimeout(function () {
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0, // 显示第几个series
          dataIndex: 0 // 显示第几个数据
        })
      })
    }
 function drawLine3 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('myChart3'))
      // 绘制图表
      var option = {
        grid: {
          top: '0',
          left: '4%',
          right: '4%',
          bottom: '8%'
        },
        title: {
          show: false,
          text: '历史同期客流同比',
          x: '20',
          y: '10',
          textStyle: {
            fontSize: 14,
            color: '#fff'
          }
        },
        legend: {
          show: false,
          top: 10,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 20, // 设置宽度
          itemHeight: 15 // 设置高度
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['总数', '散客', '团体', '线下', '线上'],
          axisTick: { // --坐标轴 刻度
            show: true // ---是否显示
          },
          axisLine: { // ---坐标轴 轴线
            show: true, // ---是否显示
            lineStyle: {
              color: 'rgba(202,202,204,0.5)',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: { // X轴文字
            show: true,
            interval: 0,
            textStyle: {
              fontSize: 12,
              color: '#999'
            }
          }
        },
        yAxis: {
          show: false,
          type: 'value',
          splitLine: { // 分割线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: { // 轴刻度值
            show: false,
            formatter: '{value}',
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          axisLine: { // ---坐标轴 轴线
            show: false // ---是否显示
          }
        },
        series: [{
          name: '今日',
          type: 'bar',
          barWidth: '15px',
          data: data1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(128,128,128,0.6)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(247,247,247,0.6)' // 100% 处的颜色
              }], false)
            }
          }
        }, {
          name: '同日',
          type: 'bar',
          barWidth: '15px',
          data: data2,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(51,172,143,0.6)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(51,172,143,0)' // 100% 处的颜色
              }], false)
            }
          }
        }]
      }
      myChart.setOption(option)
      setTimeout(function () {
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0, // 显示第几个series
          dataIndex: 0 // 显示第几个数据
        })
      })
    }
    drawLine2()
    drawLine3()
    </script>
</body>
</html>